<template>
<!-- Vue2.0需要根元素，Vue3.0可以是代码片段 -->
  <div>小鸵鸟
     <!-- 1.使用根模块state的数据 -->
    <p>{{$store.state.username}}</p>
    <!-- 2.使用根模块的getters的数据 -->
    <p>{{$store.getters.newName}}</p>
    <p>{{$store.getters["newName"]}}</p>
    <button @click="mutationsFn">mutationsFn</button>
  </div>
  
</template>
<script>
import  {useStore} from "vuex"
  export default{
    name:'App',
    setup(){
      // 使用vuex仓库
      const store =useStore()
      // 1.使用根模块state的数据
      console.log(store.state.username)
      // 2.使用跟模块的getters的数据
      console.log(store.getters.newName)
      // 3/提交根模块的mutations的函数
      const mutationsFn=()=>{
      store.commit("updateName")
       // 4.调用根模块actions的函数
       store.dispatch("updateName")
      }
      return {mutationsFn}
    }
  }
</script>
<style lang="less">

</style>


<template>
<!-- 
  modules (分模块)
存在两种情况
默认的模块，state 区分模块，其他 getters mutations actions 都在全局。
带命名空间 namespaced: true 的模块，所有功能区分模块，更高封装度和复用。
 -->
  <div>
    <!-- 1.使用A模块的state的数据 -->
    <p>{{$store.state.moduleA.username}}</p>
    <!-- 1.1使用A模块的getters的数据(只有state有模块，其他全放全局里面去了，所以不用加moduleA.newName) -->
    <p>{{$store.getters.newName}}</p>
    <!-- 1.使用B模块的state的数据（moduleB模块是带命名空间的） -->
    <p>{{$store.state.moduleB.username}}</p>
    <p>{{$store.getters['moduleB/newName']}}</p>
    <button @click="mutationsFn">mutationsFn</button>
    <button @click="ActionsFn">ActionsFn</button>
  </div>
</template>
<script>
import { useStore } from "vuex"
  export default{
    name:'App',
    setup(){
      const store=useStore()
      const mutationsFn =()=>{
        // 2.3提交B模块的修改
        store.commit("moduleB/updateName")
      }
      const ActionsFn =()=>{
        // 2.4调用B模块的actions
        store.dispatch("moduleB/updateName")
      }
      return {ActionsFn,mutationsFn}
    }
  }
</script>
<style lang="less">

</style>
